<template>
  <div class="box">
    <el-header class="header">
      <h1>东软空气质量环保公众共监督平台</h1>
      <div class="showTime"></div>
    </el-header>
    <el-main class="main">
      <!--      左侧布局        -->
      <div class="column">
        <PieLine />
      </div>
      <!--      中间布局        -->
      <div class="column">
        <!-- 数据模块 -->
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>{{ item1 }}</li>
              <li>{{ item2 }}</li>
              <li>{{ item3 }}</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>空气质量检测总指数</li>
              <li>空气质量良好指数</li>
              <li>空气质量污染指数</li>
            </ul>
          </div>
        </div>

        <!-- 地图模块 -->
        <div class="map">
          <div class="chart">
            <ChinaMap></ChinaMap>
          </div>
        </div>
      </div>
      <!--      右侧布局         -->
      <div class="column">
        <BarChart />
      </div>
    </el-main>
  </div>
</template>

<script setup>
import '@/assets/flexiable.js'
import { ref, onMounted } from 'vue'
import request from '@/utils/request8085'
import BarChart from '@/components/screen/BarChart.vue'
import PieLine from '@/components/screen/PieLine.vue'
import ChinaMap from '@/components/screen/ChinaMap.vue'

//显示当前时间
var dt = null
var t = null
t = setTimeout(time, 1000) //開始运行
function time() {
  clearTimeout(t) //清除定时器
  dt = new Date()
  var y = dt.getFullYear()
  var mt = dt.getMonth() + 1
  var day = dt.getDate()
  var h = dt.getHours() //获取时
  var m = dt.getMinutes() //获取分
  var s = dt.getSeconds() //获取秒
  document.querySelector('.showTime').innerHTML =
    y + '年' + mt + '月' + day + '日' + '-' + h + '时' + m + '分' + s + '秒'
  t = setTimeout(time, 1000) //设定定时器，循环运行
}
const item1 = ref('')
const item2 = ref('')
const item3 = ref('')

onMounted(async () => {
  try {
    const response = await request.get('/stat/query/aqi')
    item1.value = response.data.total
    item2.value = response.data.good
    item3.value = response.data.bad
  } catch (error) {
    console.error('文字描述:', error)
  }
})
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.box {
  display: flex;
  flex-direction: column;
  position: fixed; /* 或者使用 position: absolute，根据需求选择 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;

  line-height: 1.15;

  .header {
    position: relative;
    height: 100px;
    width: 100%;
    align-content: center;
    background-color: cornflowerblue;

    h1 {
      font-size: 38px;
      color: #a7adf1;
      text-align: center;
      line-height: 80px;
    }
    .showTime {
      position: absolute;
      right: 30px;
      top: 0;
      line-height: 75px;
      color: rgb(255, 255, 255, 0.7);
      font-size: 20px;
    }
  }
}

.main {
  display: flex;
  width: 100%;
  margin: 0 auto;
  padding: 10px 10px 0;
  background-image: url('@/assets/images/ScreenMain.png');
  background-size: cover;

  .column:nth-child(1) {
    flex: 3;
  }

  .column:nth-child(2) {
    flex: 5;
    margin: 0 10px 15px;
  }

  .column:nth-child(3) {
    flex: 3;
  }

  .no {
    background-color: rgba(101, 132, 226, 0.1);
    padding: 15px;
    .no-hd {
      border: 1px solid rgba(25, 186, 139, 0.17);
      ul {
        display: flex;
        li {
          flex: 1;
          line-height: 70px;
          font-size: 50px;
          color: #eadc99;
          text-align: center;
        }
      }
    }
    .no-bd {
      ul {
        display: flex;
        li {
          flex: 1;
          line-height: 40px;
          height: 40px;
          font-size: 18px;
          color: rgba(255, 255, 255, 0.7);
          text-align: center;
          padding-top: 10px;
        }
      }
    }
  }

  .map {
    position: relative;
    height: 810px;
    .chart {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 810px;
    }
  }
}
</style>
